<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content=""></meta>
    <meta name="author" content=""></meta>
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico"></link>
    <title>SummerCoding</title>
    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet"></link>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet"></link>
    <!-- Custom styles for this template -->
    <link href="../css/dashboard.css" rel="stylesheet"></link>
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../js/ie-emulation-modes-warning.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Summer Coding</a>
        </div>
        <!--
            作者：zwind2009@163.com
            时间：2017-09-18
            描述：

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Settings</a>
                </li>
                <li>
                    <a href="#">Profile</a>
                </li>
                <li>
                    <a href="#">Help</a>
                </li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
        -->
    </div>
</nav>

<div class="row">
    <div class="col-xs-6 col-md-4">
        <div class="panel panel-success">
            <div class="panel-heading">数据库信息</div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">数据库</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="dbtype">
                                <option value="mysql">mysql</option>
                                <option value="oracle">oracle</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="ip" class="col-sm-2 control-label">IP</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="ip" placeholder="IP" value="127.0.0.1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="port" class="col-sm-2 control-label">端口</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="port" placeholder="端口" value="3306">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" placeholder="用户名" value="root">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="password" placeholder="Password" value="123456">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button"form="" class="btn btn-success" onclick="connectonDb()">连接</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="list-group" id="db_list">
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-8">
        <div class="panel panel-success">
            <div class="panel-heading">代码生成元素</div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="package">package</label>
                        <input type="text" class="form-control" id="package" placeholder="com.mdxtc.business">
                    </div>
                    <div class="form-group">
                        <label for="author">author</label>
                        <input type="text" class="form-control" id="author" placeholder="author">
                    </div>
                    <div class="form-group">
                        <label for="path">保存地址 </label>
                        <input type="index" class="form-control" id="path" placeholder="D:/f/f/s">
                    </div>
                    <button type="button" onclick="exportCode()" class="btn btn-success">导出</button>
                </form>
            </div>
            <table class="table">
                <thead>
                <tr>
                    <th>#</th>
                    <th><input onclick="checkAll(this)" type="checkbox"></th>
                    <th>表</th>
                    <th>备注</th>

                </tr>
                </thead>
                <tbody id="table_list">

                </tbody>
            </table>
        </div>
    </div>

</div>
</body>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../js/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>

<script>


    	function connectonDb(){

    	    var dbInfo ={
    			dbType:$("#dbtype").val(),
    			ip:$("#ip").val(),
    			port:$("#port").val(),
    			db:$("#db").val(),
    			username:$("#username").val(),
    			password:$("#password").val()
    		};

    	    var obj =JSON.stringify(dbInfo);

    		$.ajax({
    			type:"post",
    			url:"http://127.0.0.1:10000/summer/dbs",
    			dataType:"json",
    			contentType:"application/json;charset=utf-8",
    			data:obj,
    			async:true,
    			success:function(ret){
                    appendDbList(ret.data);
                 }
    		});
    	}

    	function appendDbList(dbs){
    		var html="";
    		for (var i=0;i<dbs.length;i++) {
    			html+='<button onclick="selectedDb(\''+dbs[i]+'\')" type="button" id="'+dbs[i]+'" class="list-group-item">'+dbs[i]+'</button>'
    		}
    		$("#db_list").empty();
    		$("#db_list").append(html);

    	}

    	function selectedDb(db){
    	  var dbType=$("#dbtype").val()
    		$.ajax({
    		    url:"http://127.0.0.1:10000/summer/tables/"+dbType+"/"+db,
    		    type:"get",
    		    success:function(ret){
                        appendTable(ret.data);
    		    }
    		});
    	}

    	function appendTable(tables){
    		var html="";
    		for (var i=0;i<tables.length;i++) {
    			html+='<tr><th scope="row">'+(i+1)+'</th><td><input value="'+tables[i].tableName+'" name="table_name" data-comment="'+tables[i].comment+'" id="'+tables[i].tableName+'" type="checkbox"></td><td>'+tables[i].tableName+'</td><td>'+tables[i].comment+'</td></tr>'
    		}
    		$("#table_list").empty();
    		$("#table_list").append(html);
    	}

    	function checkAll(ele){
    		$("input[name='table_name']").each(function(index,element){
    			element.checked=ele.checked;
    		});
    	}

    	function getAllChekcedValue(){
    		var tableAttr = [];
    		$("input[name='table_name']").each(function(index,element){
    			if(element.checked){
    				tableAttr.push({tableName:element.value,comment:$(element).attr("data-comment")})
    			}
    		});
    		return tableAttr;
    	}

    	function exportCode(){

    	var data = {
    		packagePath:$("#package").val(),
    		author:$("#author").val(),
            path:$("#path").val(),
    		tables:getAllChekcedValue(),
    		dbType:$("#dbtype").val()
    	 }
        console.log(JSON.stringify(data))

    	$.ajax({
    		type:"post",
    		url:"http://127.0.0.1:10000/summer/create",
    		data:JSON.stringify(data),
    		contentType:"application/json;charset=utf-8",
    		dataType:"json",
    		async:true,
    		success:function(ret){
    			alert(ret.message);
    		}
    	});
     }



    </script>

</html>
